import React, { useContext } from 'react';

import { signOut } from '@/entities/auth/model/actions';
import { getUserId } from '@/entities/auth/model/selectors';
import { removeProfile } from '@/entities/profile/model/actions';
import { innerUrls } from '@/shared/constants';
import { ModalContext } from '@/shared/context/ModalContext';
import { useMetaTag } from '@/shared/lib/hooks';
import { useAppDispatch, useAppSelector } from '@/shared/store';
import { Button, ButtonVariants, FlexWrapper, Modal, Title } from '@/shared/ui';
import { useRouter } from 'next/router';
import s from 'src/entities/auth/ui/ConfirmExitModal/ConfirmExitModal.module.scss';
import { useWindowSize } from 'usehooks-ts';

export const DeleteProfile = () => {
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, []);
  const userId = useAppSelector(getUserId);

  const { closeModal } = useContext(ModalContext);
  useMetaTag(true, '#999999');
  const router = useRouter();

  const { width } = useWindowSize();

  const dispatch = useAppDispatch();

  const handleLogout = async () => {
    await dispatch(removeProfile(userId as number));
    await dispatch(signOut());
    closeModal();
    await router.push(innerUrls.main);
  };

  return (
    <Modal className={s.modal} isOpen onCloseClick={closeModal}>
      <FlexWrapper gap={width > 1024 ? 32 : 24} isCenter>
        <Title size="modal-size" title="Удалить профиль?" />
        <Title size="m-no-bold" title="Восстановить данные не получится" />
        <Button
          disabled={false}
          onClick={handleLogout}
          style={{ marginBottom: width > 1024 ? '24px' : '16px' }}
          variant={ButtonVariants.Danger}
        >
          Удалить
        </Button>
      </FlexWrapper>
      <FlexWrapper isCenter>
        <Button className={s.exit} onClick={closeModal} variant={ButtonVariants.Link}>
          Отмена
        </Button>
      </FlexWrapper>
    </Modal>
  );
};
